<template>
  <div class="data-analysis-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>数据分析</h1>
    </div>

    <!-- 筛选条件区域 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="数据维度">
          <el-select v-model="filterForm.dimension" placeholder="请选择数据维度">
            <el-option label="按日" value="day"></el-option>
            <el-option label="按周" value="week"></el-option>
            <el-option label="按月" value="month"></el-option>
            <el-option label="按季度" value="quarter"></el-option>
            <el-option label="按年" value="year"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="供应商类型">
          <el-select v-model="filterForm.supplierType" placeholder="请选择供应商类型">
            <el-option label="全部" value="all"></el-option>
            <el-option label="省级供应商" value="provincial"></el-option>
            <el-option label="市级供应商" value="municipal"></el-option>
            <el-option label="区级供应商" value="district"></el-option>
            <el-option label="其他" value="other"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品类别">
          <el-select v-model="filterForm.category" placeholder="请选择商品类别">
            <el-option label="全部" value="all"></el-option>
            <el-option label="办公用品" value="office"></el-option>
            <el-option label="IT设备" value="it"></el-option>
            <el-option label="家具家电" value="furniture"></el-option>
            <el-option label="服务类" value="service"></el-option>
            <el-option label="其他" value="other"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleExport">
            <el-icon><Download /></el-icon> 导出数据
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <!-- 销售额趋势图 -->
      <el-col :span="24">
        <el-card class="chart-card">
          <div class="card-header">
            <h2>销售额趋势分析</h2>
            <el-select v-model="salesTrendType" size="small">
              <el-option label="销售额" value="amount"></el-option>
              <el-option label="订单数" value="orders"></el-option>
              <el-option label="平均客单价" value="avgPrice"></el-option>
            </el-select>
          </div>
          <div class="chart-container">
            <el-loading v-loading="salesTrendLoading" element-loading-text="加载中...">
              <echarts :option="salesTrendOption" class="chart" ref="salesTrendRef"></echarts>
            </el-loading>
          </div>
        </el-card>
      </el-col>

      <!-- 销售额与订单数对比 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">
            <h2>销售额与订单数对比</h2>
          </div>
          <div class="chart-container">
            <el-loading v-loading="salesOrderCompareLoading" element-loading-text="加载中...">
              <echarts :option="salesOrderCompareOption" class="chart" ref="salesOrderCompareRef"></echarts>
            </el-loading>
          </div>
        </el-card>
      </el-col>

      <!-- 供应商销售额占比 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">
            <h2>供应商销售额占比</h2>
          </div>
          <div class="chart-container">
            <el-loading v-loading="supplierShareLoading" element-loading-text="加载中...">
              <echarts :option="supplierShareOption" class="chart" ref="supplierShareRef"></echarts>
            </el-loading>
          </div>
        </el-card>
      </el-col>

      <!-- 商品类别销售分布 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">
            <h2>商品类别销售分布</h2>
          </div>
          <div class="chart-container">
            <el-loading v-loading="categoryDistributionLoading" element-loading-text="加载中...">
              <echarts :option="categoryDistributionOption" class="chart" ref="categoryDistributionRef"></echarts>
            </el-loading>
          </div>
        </el-card>
      </el-col>

      <!-- 区域销售热力图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">
            <h2>区域销售热力图</h2>
          </div>
          <div class="chart-container">
            <el-loading v-loading="regionHeatmapLoading" element-loading-text="加载中...">
              <echarts :option="regionHeatmapOption" class="chart" ref="regionHeatmapRef"></echarts>
            </el-loading>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据表格区域 -->
    <el-card class="data-table-card">
      <div class="card-header">
        <h2>销售明细数据</h2>
      </div>
      <div class="table-container">
        <el-loading v-loading="tableLoading" element-loading-text="加载中...">
          <el-table
            :data="salesData"
            border
            size="small"
            highlight-current-row
            :header-cell-style="{ 'background-color': '#f5f7fa' }"
          >
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="date" label="日期" min-width="120"></el-table-column>
            <el-table-column prop="supplierName" label="供应商" min-width="150"></el-table-column>
            <el-table-column prop="category" label="商品类别" min-width="100"></el-table-column>
            <el-table-column prop="orderCount" label="订单数" min-width="80" align="right"></el-table-column>
            <el-table-column prop="totalAmount" label="销售额" min-width="120" align="right">
              <template #default="scope">{{ scope.row.totalAmount | formatCurrency }}</template>
            </el-table-column>
            <el-table-column prop="avgPrice" label="平均客单价" min-width="120" align="right">
              <template #default="scope">{{ scope.row.avgPrice | formatCurrency }}</template>
            </el-table-column>
            <el-table-column prop="growthRate" label="环比增长率" min-width="120" align="right">
              <template #default="scope">
                <span :class="{ 'text-success': scope.row.growthRate > 0, 'text-danger': scope.row.growthRate < 0 }">
                  {{ scope.row.growthRate > 0 ? '+' : '' }}{{ scope.row.growthRate }}%
                </span>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </el-loading>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import {
  Download,
  RefreshCw
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 筛选表单数据
const filterForm = reactive({
  dateRange: [] as string[],
  dimension: 'month',
  supplierType: 'all',
  category: 'all'
});

// 销售额趋势图类型
const salesTrendType = ref('amount');

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 图表引用
const salesTrendRef = ref<HTMLDivElement | null>(null);
const salesOrderCompareRef = ref<HTMLDivElement | null>(null);
const supplierShareRef = ref<HTMLDivElement | null>(null);
const categoryDistributionRef = ref<HTMLDivElement | null>(null);
const regionHeatmapRef = ref<HTMLDivElement | null>(null);

// 图表实例
const salesTrendInstance = ref<echarts.ECharts | null>(null);
const salesOrderCompareInstance = ref<echarts.ECharts | null>(null);
const supplierShareInstance = ref<echarts.ECharts | null>(null);
const categoryDistributionInstance = ref<echarts.ECharts | null>(null);
const regionHeatmapInstance = ref<echarts.ECharts | null>(null);

// 加载状态
const salesTrendLoading = ref(true);
const salesOrderCompareLoading = ref(true);
const supplierShareLoading = ref(true);
const categoryDistributionLoading = ref(true);
const regionHeatmapLoading = ref(true);
const tableLoading = ref(true);

// 图表配置
const salesTrendOption = ref<echarts.EChartOption>({});
const salesOrderCompareOption = ref<echarts.EChartOption>({});
const supplierShareOption = ref<echarts.EChartOption>({});
const categoryDistributionOption = ref<echarts.EChartOption>({});
const regionHeatmapOption = ref<echarts.EChartOption>({});

// 销售明细数据
const salesData = ref<any[]>([]);

// 格式化金额过滤器
const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(value);
};

// 查询数据
const handleQuery = () => {
  // 设置所有加载状态为true
  salesTrendLoading.value = true;
  salesOrderCompareLoading.value = true;
  supplierShareLoading.value = true;
  categoryDistributionLoading.value = true;
  regionHeatmapLoading.value = true;
  tableLoading.value = true;

  // 模拟API请求延迟
  setTimeout(() => {
    // 生成图表数据
    generateSalesTrendData();
    generateSalesOrderCompareData();
    generateSupplierShareData();
    generateCategoryDistributionData();
    generateRegionHeatmapData();
    generateSalesTableData();

    // 关闭加载状态
    salesTrendLoading.value = false;
    salesOrderCompareLoading.value = false;
    supplierShareLoading.value = false;
    categoryDistributionLoading.value = false;
    regionHeatmapLoading.value = false;
    tableLoading.value = false;

    ElMessage.success('数据加载成功');
  }, 1500);
};

// 重置筛选条件
const handleReset = () => {
  filterForm.dateRange = [];
  filterForm.dimension = 'month';
  filterForm.supplierType = 'all';
  filterForm.category = 'all';
};

// 导出数据
const handleExport = () => {
  ElMessageBox.confirm('确定要导出当前数据分析结果吗？', '导出数据', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    // 模拟导出延迟
    setTimeout(() => {
      ElMessage.success('数据导出成功');
    }, 1000);
  }).catch(() => {
    // 用户取消导出
  });
};

// 分页大小变化
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  tableLoading.value = true;
  setTimeout(() => {
    generateSalesTableData();
    tableLoading.value = false;
  }, 800);
};

// 当前页码变化
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  tableLoading.value = true;
  setTimeout(() => {
    generateSalesTableData();
    tableLoading.value = false;
  }, 800);
};

// 生成销售额趋势图数据
const generateSalesTrendData = () => {
  // 根据维度生成不同数量的数据点
  let dataCount = 12; // 默认按月
  let xAxisType = 'category';
  let xAxisData: string[] = [];
  let amountData: number[] = [];
  let orderData: number[] = [];
  let avgPriceData: number[] = [];

  // 根据选择的维度调整数据
  switch (filterForm.dimension) {
    case 'day':
      dataCount = 30;
      for (let i = dataCount - 1; i >= 0; i--) {
        const date = new Date();
        date.setDate(date.getDate() - i);
        xAxisData.push(date.toISOString().slice(5, 10)); // MM-DD
      }
      break;
    case 'week':
      dataCount = 12;
      for (let i = dataCount - 1; i >= 0; i--) {
        xAxisData.push(`第${i + 1}周`);
      }
      break;
    case 'month':
      dataCount = 12;
      xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      break;
    case 'quarter':
      dataCount = 4;
      xAxisData = ['Q1', 'Q2', 'Q3', 'Q4'];
      break;
    case 'year':
      dataCount = 5;
      const currentYear = new Date().getFullYear();
      for (let i = dataCount - 1; i >= 0; i--) {
        xAxisData.push((currentYear - i).toString());
      }
      break;
  }

  // 生成随机数据
  for (let i = 0; i < dataCount; i++) {
    const baseAmount = filterForm.dimension === 'year' ? 5000000 : 500000;
    const amount = Math.floor(Math.random() * baseAmount) + baseAmount * 0.5;
    amountData.push(amount);

    const orderCount = Math.floor(Math.random() * 100) + 50;
    orderData.push(orderCount);

    avgPriceData.push(Math.floor(amount / orderCount));
  }

  // 设置图表标题和系列名称
  let seriesName = '销售额';
  let yAxisFormatter = '{value} 元';
  let seriesData = amountData;

  if (salesTrendType.value === 'orders') {
    seriesName = '订单数';
    yAxisFormatter = '{value} 单';
    seriesData = orderData;
  } else if (salesTrendType.value === 'avgPrice') {
    seriesName = '平均客单价';
    yAxisFormatter = '{value} 元';
    seriesData = avgPriceData;
  }

  // 设置图表配置
  salesTrendOption.value = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params: any) {
        let tooltipHtml = `${params[0].name}<br/>`;
        if (salesTrendType.value === 'amount') {
          tooltipHtml += `${seriesName}: ${formatCurrency(params[0].value)}`;
        } else if (salesTrendType.value === 'orders') {
          tooltipHtml += `${seriesName}: ${params[0].value} 单`;
        } else {
          tooltipHtml += `${seriesName}: ${formatCurrency(params[0].value)}`;
        }
        return tooltipHtml;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: xAxisType,
        data: xAxisData,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: seriesName,
        axisLabel: {
          formatter: yAxisFormatter
        }
      }
    ],
    series: [
      {
        name: seriesName,
        type: 'line',
        data: seriesData,
        smooth: true,
        itemStyle: {
          color: '#409EFF'
        },
        lineStyle: {
          width: 3
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0)' }
          ])
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ]
        }
      }
    ]
  };

  // 更新图表
  if (salesTrendInstance.value) {
    salesTrendInstance.value.setOption(salesTrendOption.value);
  }
};

// 生成销售额与订单数对比图数据
const generateSalesOrderCompareData = () => {
  // 生成类别数据
  const categories = ['1月', '2月', '3月', '4月', '5月', '6月'];
  const salesData: number[] = [];
  const orderData: number[] = [];

  // 生成随机数据
  for (let i = 0; i < categories.length; i++) {
    salesData.push(Math.floor(Math.random() * 500000) + 500000);
    orderData.push(Math.floor(Math.random() * 100) + 50);
  }

  // 设置图表配置
  salesOrderCompareOption.value = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['销售额', '订单数'],
      top: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: categories,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        min: 0,
        axisLabel: {
          formatter: '{value} 元'
        }
      },
      {
        type: 'value',
        name: '订单数',
        min: 0,
        axisLabel: {
          formatter: '{value} 单'
        }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: salesData,
        itemStyle: {
          color: '#409EFF'
        },
        emphasis: {
          focus: 'series'
        }
      },
      {
        name: '订单数',
        type: 'line',
        yAxisIndex: 1,
        data: orderData,
        itemStyle: {
          color: '#E6A23C'
        },
        lineStyle: {
          color: '#E6A23C'
        },
        emphasis: {
          focus: 'series'
        }
      }
    ]
  };

  // 更新图表
  if (salesOrderCompareInstance.value) {
    salesOrderCompareInstance.value.setOption(salesOrderCompareOption.value);
  }
};

// 生成供应商销售额占比数据
const generateSupplierShareData = () => {
  // 供应商数据
  const suppliers = [
    '供应商A', '供应商B', '供应商C', '供应商D', '供应商E', '其他'
  ];

  // 生成随机占比数据
  const data: any[] = [];
  let total = 0;

  for (let i = 0; i < suppliers.length - 1; i++) {
    const value = Math.floor(Math.random() * 30) + 5;
    data.push({ value, name: suppliers[i] });
    total += value;
  }

  // 其他供应商占比
  data.push({ value: 100 - total, name: suppliers[suppliers.length - 1] });

  // 设置图表配置
  supplierShareOption.value = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d} 元)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: suppliers
    },
    series: [
      {
        name: '销售额占比',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  };

  // 更新图表
  if (supplierShareInstance.value) {
    supplierShareInstance.value.setOption(supplierShareOption.value);
  }
};

// 生成商品类别销售分布图数据
const generateCategoryDistributionData = () => {
  // 商品类别数据
  const categories = ['办公用品', 'IT设备', '家具家电', '服务类', '其他'];

  // 生成随机数据
  const data: number[] = [];
  for (let i = 0; i < categories.length; i++) {
    data.push(Math.floor(Math.random() * 500000) + 100000);
  }

  // 设置图表配置
  categoryDistributionOption.value = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b}: {c} 元'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        formatter: '{value} 元'
      }
    },
    yAxis: {
      type: 'category',
      data: categories
    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: data,
        itemStyle: {
          color: function(params: any) {
            const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
            return colorList[params.dataIndex];
          }
        }
      }
    ]
  };

  // 更新图表
  if (categoryDistributionInstance.value) {
    categoryDistributionInstance.value.setOption(categoryDistributionOption.value);
  }
};

// 生成区域销售热力图数据
const generateRegionHeatmapData = () => {
  // 区域数据
  const regions = [
    '北京', '上海', '广东', '江苏', '浙江', '山东', '河南', '四川', '湖北', '湖南',
    '河北', '安徽', '福建', '陕西', '江西', '重庆', '辽宁', '云南', '黑龙江', '广西',
    '山西', '内蒙古', '贵州', '新疆', '甘肃', '海南', '宁夏', '青海', '西藏', '吉林'
  ];

  // 生成随机热力值数据
  const data: any[] = [];
  for (let i = 0; i < regions.length; i++) {
    data.push([regions[i], Math.floor(Math.random() * 100)]);
  }

  // 设置图表配置
  regionHeatmapOption.value = {
    tooltip: {
      formatter: '{b}: {c} 分'
    },
    visualMap: {
      min: 0,
      max: 100,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: 0,
      textStyle: {
        color: '#333'
      }
    },
    series: [
      {
        name: '销售热度',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
          show: true,
          fontSize: 8
        },
        emphasis: {
          label: {
            show: true
          }
        },
        data: data.map(item => ({
          name: item[0],
          value: item[1]
        }))
      }
    ]
  };

  // 更新图表
  if (regionHeatmapInstance.value) {
    regionHeatmapInstance.value.setOption(regionHeatmapOption.value);
  }
};

// 生成销售明细表格数据
const generateSalesTableData = () => {
  // 生成模拟数据
  const mockData: any[] = [];
  const categories = ['办公用品', 'IT设备', '家具家电', '服务类', '其他'];
  const suppliers = ['供应商A', '供应商B', '供应商C', '供应商D', '供应商E', '供应商F', '供应商G'];

  // 生成当前页数据
  for (let i = 0; i < pagination.pageSize; i++) {
    const index = (pagination.currentPage - 1) * pagination.pageSize + i + 1;
    const date = new Date();
    date.setDate(date.getDate() - Math.floor(Math.random() * 90));
    const formattedDate = date.toISOString().slice(0, 10);
    const orderCount = Math.floor(Math.random() * 50) + 10;
    const totalAmount = Math.floor(Math.random() * 200000) + 50000;
    const avgPrice = Math.floor(totalAmount / orderCount);
    const growthRate = Number((Math.random() * 20 - 5).toFixed(2));

    mockData.push({
      index,
      date: formattedDate,
      supplierName: suppliers[Math.floor(Math.random() * suppliers.length)],
      category: categories[Math.floor(Math.random() * categories.length)],
      orderCount,
      totalAmount,
      avgPrice,
      growthRate
    });
  }

  // 设置总条数
  pagination.total = 128;

  // 更新表格数据
  salesData.value = mockData;
};

// 初始化图表
const initCharts = () => {
  // 初始化销售额趋势图
  if (salesTrendRef.value) {
    salesTrendInstance.value = echarts.init(salesTrendRef.value);
  }

  // 初始化销售额与订单数对比图
  if (salesOrderCompareRef.value) {
    salesOrderCompareInstance.value = echarts.init(salesOrderCompareRef.value);
  }

  // 初始化供应商销售额占比图
  if (supplierShareRef.value) {
    supplierShareInstance.value = echarts.init(supplierShareRef.value);
  }

  // 初始化商品类别销售分布图
  if (categoryDistributionRef.value) {
    categoryDistributionInstance.value = echarts.init(categoryDistributionRef.value);
  }

  // 初始化区域销售热力图
  if (regionHeatmapRef.value) {
    regionHeatmapInstance.value = echarts.init(regionHeatmapRef.value);
  }
};

// 窗口大小变化时重绘图表
const handleResize = () => {
  salesTrendInstance.value?.resize();
  salesOrderCompareInstance.value?.resize();
  supplierShareInstance.value?.resize();
  categoryDistributionInstance.value?.resize();
  regionHeatmapInstance.value?.resize();
};

// 监听销售额趋势图类型变化
watch(salesTrendType, () => {
  if (!salesTrendLoading.value) {
    salesTrendLoading.value = true;
    setTimeout(() => {
      generateSalesTrendData();
      salesTrendLoading.value = false;
    }, 500);
  }
});

// 页面加载时初始化
onMounted(() => {
  // 设置默认日期范围为最近30天
  const endDate = new Date();
  const startDate = new Date();
  startDate.setDate(endDate.getDate() - 30);
  filterForm.dateRange = [
    startDate.toISOString().slice(0, 10),
    endDate.toISOString().slice(0, 10)
  ];

  // 初始化图表
  nextTick(() => {
    initCharts();
    // 加载数据
    handleQuery();
  });

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});
</script>

<style scoped lang="scss">
.data-analysis-container {
  padding: 0 20px;
}

.page-header {
  margin-bottom: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  padding: 10px 0;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.chart-container {
  height: 350px;
}

.chart {
  width: 100%;
  height: 100%;
}

.data-table-card {
  margin-bottom: 20px;
}

.table-container {
  overflow-x: auto;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.text-success {
  color: #67C23A;
}

.text-danger {
  color: #F56C6C;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .el-col {
    &.lg-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}

@media (max-width: 768px) {
  .data-analysis-container {
    padding: 0 10px;
  }

  .filter-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-form .el-form-item {
    margin-bottom: 15px;
    width: 100%;
  }

  .chart-container {
    height: 300px;
  }
}
</style>